<script setup lang="ts">
import { onMounted, ref, defineProps } from 'vue'
import { Pie } from '@antv/g2plot'
import * as echarts from 'echarts'

interface ChartData {
  value: number;
  type: string;
}

interface Props {
  data: ChartData[];
}

const chart1 = ref(null)

const props = defineProps<Props>()

const pieChartRef = ref<Pie | null>(null)

onMounted(() => {
  // renderPieChart(pieChartRef.value!, props.data)

  setTimeout(() => {
    let myChart1 = echarts.init(chart1.value)

    let option = {
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return `${params.name}: ${params.value}%`
        }
      },
      grid: {
        left: '3%',   // 左边距
        right: '4%',  // 右边距
        top: '3%',    // 上边距
        bottom: '3%' // 下边距
      },
      legend: {
        orient: 'vertical',  // 将图例垂直显示
        right: 0,  // 位置调整，可以根据需求自行调整
        top: '5%',
        formatter: function(name) {
          const data = props.data.find(item => item.name === name)
          return name + data.value + '%'
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['20%', '50%'],
          avoidLabelOverlap: true,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: props.data
        }
      ]
    }

    myChart1.setOption(option)
  })

})

// const renderPieChart = (container: HTMLElement, data: ChartData[]) => {
//   pieChartRef.value = new Pie(container, {
//     data,
//     angleField: 'value',
//     colorField: 'type',
//     legend: {
//       // flipPage: false,
//       position: 'right'
//     },
//     radius: 0.9,
//     innerRadius: 0.6,
//     statistic: false,
//     label: {
//       visible: false,
//       position: 'outside',
//       connectorDistance: 0,
//       content: ({ type, value }) =>
//         `${type}`
//     },
//     tooltip:false,
//     interactions: [{ type: 'element-selected' }, { type: 'element-active' }]
//   })
//
//   pieChartRef.value.render()
// }

</script>

<template>
  <div class="pie-container" ref="chart1" />
</template>

<style scoped lang="scss">
.pie-container {
  width: 5.2rem;
  height: 3rem;
}
</style>
